<template>
	<md-field-group class="foget_view">
		<md-field
			v-model="mobile"
			icon="mobile"
			placeholder="请输入手机号"/>

		<md-field
			v-model="code"
			icon="lock"
			placeholder="请输入短信验证码"
		>
			<div slot="rightIcon" @click="getCode" class="getCode red">
				<countdown v-if="counting" :time="60000" @end="countdownend">
				  <template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
				</countdown>
				<span v-else>获取验证码</span>
			</div>
		</md-field >

		<div class="foget_submit">
			<van-button size="large" type="danger" @click="submitCode">{{buttonText}}</van-button>
		</div>
	</md-field-group>
</template>

<script>
import field from '@/components/field/';
import fieldGroup from '@/components/field-group/';
import { authLoginBySms} from '@/api/api';
import { setLocalStorage } from '@/utils/local-storage';
import { authRegisterCaptcha } from '@/api/api';
export default {
  data() {
    return {
      buttonText:"下一步",
      counting: false,
      mobile: '',
      code: '',
      userInfo: {}
    };
  },
   created:function(){
        let mark = this.$route.query.mark;
        if(mark){
            this.buttonText ='登录';
		}
   },
  methods: {
      submitCode() {
          let mark = this.$route.query.mark;
          //短信登录
          if (mark) {
              let loginData = this.getLoginData();
              authLoginBySms(loginData).then(res => {
                  this.userInfo = res.data.data.userInfo;
                  setLocalStorage({
                      Authorization: res.data.data.token,
                      avatar: this.userInfo.avatarUrl,
                      nickName: this.userInfo.nickName
                  });
                  this.routerRedirect();
              }).catch(error => {
                  this.$toast.fail(error.data.errmsg);
              });
          } else {
              this.$router.push({name: 'forgetReset'});
          }
      },
      getCode() {
          this.counting = true;
          let data = {
              mobile: this.mobile
          };
          authRegisterCaptcha(data).then(res => {
              this.counting = true;
          }).catch(error => {
              this.$toast.fail(error.data.errmsg);
              this.counting = true;
          });
      },
      countdownend() {
          this.counting = false;
      },
      routerRedirect() {
          window.location = '#/user/';
      },
      getLoginData() {
          const code = this.code;
          const mobile = this.mobile;
          return {
              code: code,
              mobile: mobile
          };
      }
  },

  components: {
    [field.name]: field,
    [fieldGroup.name]: fieldGroup
  }
};
</script>

<style lang="scss" scoped>
@import '../../../assets/scss/mixin';

div.foget_view {
  background-color: #fff;
  padding-top: 30px;
}

div.foget_submit {
  padding-top: 30px;
  padding-bottom: 20px;
}

.getCode {
  @include one-border(left);
  text-align: center;
}

.time_down {
  color: $red;
}
</style>
